<template>
    <div id="app">
        <el-container style="height: 800px; border: 1px solid #eee">
            <el-header style="width:100%;text-align: left;height: 60px;line-height: 60px; color:#fff;background: #66b1ff">
                <img src="/images/logo.png" style="width: 100px;height: 60px;" align="center" >
                <span style="font-size: 20px;">百里半ERP管理系统</span>
                <div style="float: right">
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px"></i>
                    </el-dropdown>
                    <span>王小虎</span>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px" style="background-color: #545c64">
                    <el-menu
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-submenu :index="fun.id" v-for="fun in functions">
                            <template slot="title"><i :class="fun.icon"></i>{{fun.name}}</template>
                            <el-menu-item-group>
                                <el-menu-item :index="cfun.id" v-for="cfun in fun.subFunctions" @click="jump(cfun.url)">
                                    {{cfun.name}}
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
<!--                    <iframe style="width: 100%;height: 100%;border:0px" name="content" src="/page/role/list.html"></iframe>-->
                </el-main>
            </el-container>
        </el-container>
        <el-footer style="background:#545c64;color:#fff;width: 100%;height: 60px;line-height: 60px;text-align: center">百里半版权所有 &copy;</el-footer>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data(){
            return {
                functions:[] //权限列表
            }
        },
        methods:{
            //连接后台，读取登录用户的权限
            loadFunctions(){
                this.axios.get("/functions/username")
                    .then(res => {
                        this.functions = res.data;
                    });
            },
            jump(path){
                this.$router.push({path:path});
            }
        },
        mounted(){
            this.loadFunctions();
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    .link{
        text-decoration: none;
        color:#cccccc;
    }
</style>